<template>
  <div>
    <header-top :fixed="true">
      <template #middle>订单列表</template>
    </header-top>
    <div class="container" :style="{ height: innerWidth }">
      <div class="img">
        <img src="../../assets/images/order/person.png" alt="" />
      </div>
      <div class="desc">登录后查看外卖订单</div>
      <mt-button type="danger" @click="$router.push('/login')"
        >立即登录</mt-button
      >
    </div>
  </div>
</template>

<script>
import HeaderTop from "../headerTop/HeaderTop.vue";

export default {
  data() {
    return {
      innerWidth: window.innerHeight,
    };
  },

  components: { HeaderTop },

  computed: {},

  methods: {},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>


.container
  height: calc(100vh - 20vh);
  display: flex
  align-items: center
  justify-content: center
  flex-flow: column;
.img img
    width: 220px;
    height: 220px;
    display: block;

.desc
    color: #9d9d9d;
    font-size: 18px;
    margin-top: 20px
    margin-bottom: 20px
button
  font-size:18px
  background-color: #009375
  padding:15px 20px

.mint-button
    height: initial;
    overflow: inherit;
</style>
